<template>
  <link rel="stylesheet" href="/assets/css/coupon.css" />

  <div class="headerbox">
    <div class="header">
      <div class="headerL">
        <a onclick="javascript:history.back(-1)" class="goback"
          ><img src="/assets/images/goback.png"
        /></a>
      </div>
      <div class="headerC">
        <p>优惠券列表</p>
      </div>
    </div>
  </div>
  <div class="h50"></div>

  <!-- 列表 -->
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      class="coupon_list"
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div v-for="item in list" :key="item" class="coupon_item">
        <div class="item_content">
          <a>
            <div class="left">{{ item.rate*100 }}<span>折</span></div>
            <div class="right">
              <div>{{ item.title }}</div>
              <div>订单满<span>100元</span>打<span>{{ item.rate*100 }}折</span></div>
              <div>每人限领1张</div>
              <div>活动结束时间:{{ item.endtime_text }}</div>
            </div>
          </a>
        </div>
        <div class="item_btn">
          <router-link class="right_btn" :to="'/coupon/couponinfo/' + item.id">优惠详情</router-link>
        </div>
      </div>
    </van-list>
  </van-pull-refresh>
</template>
<script setup>
import { getCurrentInstance, ref } from "vue";

const { proxy } = getCurrentInstance();
const business = proxy.$business.value
const count = ref(0) //列表总数
const list = ref([]);//列表信息
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const onLoad = () => {
  setTimeout(async () => {
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }

    // 发送请求
    var result = await proxy.$POST({
      url:'coupon/index',
      params:{id:business.id}
    })

    if(result.code == 0){
      proxy.$success(result.msg)
      return
    }else if(result.code == 1){
      count.value = result.data.count
      list.value = result.data.list
    }
   
    loading.value = false;

    if (list.value.length >= count.value) {
      finished.value = true;
    }
  }, 500);
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;


  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  refreshing.value = true;
  onLoad();
};
</script>
    